<template>
  <uni-nav-bar title="车队" color="#333" :border="false" statusBar></uni-nav-bar>
  <view class="package">{{getFleetAll.name}}</view>
  <view class="package" style="padding: 0px 20rpx;">
    <view class="space-between lis">
      <view>姓名</view>
      <input class="uni-input" :placeholder="userinfo.realname?userinfo.realname:'请输入真实姓名'" v-model="username" />
    </view>
    <view class="space-between lis">
      <view>手机号</view>
      <input class="uni-input" maxlength="11" :placeholder="userinfo.mobile?userinfo.mobile:'请输入手机号'" type="number"
        v-model="tel" />
    </view>
    <view class="space-between lis" v-if="!userinfo.mobile">
      <view>验证码</view>
      <view class="center">
        <input class="uni-input" type="number" placeholder="请输入验证码" v-model="code" />
        <view class="_code" @click="toSendCode()">{{textArea}}</view>
      </view>
    </view>
  </view>
  <view class="add" @click="submit()">确定</view>
</template>

<script setup lang="ts">
  import { errorToast, showLoading, showToast, successToast } from '@/utils/prompt';
  import { toPublish } from '@mqtt';
  import { getFleetInfo } from '@/gql/fleet';
  import { useUserStore } from '@/stores/user';
  import { getDriverID } from '@/stores/driverID';
  import { decrypt } from '@/utils/jsencrypt';
  import { ref, onMounted } from 'vue';
  const userinfo = useUserStore();
  const driver_id = getDriverID();
  /**
   * 车队绑定
   * @param {String} username 姓名
   * @param {String} tel 手机号码
   * @param {String} code 验证码
   * @param {String} textArea 验证信息
   * @param {Object} getFleetAll 车队信息
   * @param {Object} all 传递信息
   * @param {Boolean} btnBool 是否重复点击
   */
  const username = ref('')
  const tel = ref('')
  const code = ref('')
  const btnBool = ref(false)
  const textArea = ref('验证码')
  const getFleetAll = ref()
  const all = ref()
  onMounted(() => {
    const loct = uni.getStorageSync('StoreData')
    all.value = JSON.parse(decrypt(loct))
    init()
  })
  function init() {
    showLoading()
    const payload = {
      query: getFleetInfo,
      variables: { driver_id: Number(all.value.from_driver_id) },
    };
    toPublish(
      'ql/driver/getFleetInfo',
      payload,
      (obj : any) => {
        const { getFleetInfo } = obj.data;
        getFleetAll.value = getFleetInfo
      },
    );
  }
  function validatePhone() {
    const rule = /^1[3-9]\d{9}$/;
    return rule.test(tel.value);
  }
  function toSendCode() {
    if (!tel.value) {
      errorToast('请输入手机号')
      return
    } else if (!validatePhone()) {
      errorToast('请输入正确的手机号')
      return
    }
    if (!btnBool.value) {
      btnBool.value = true
      showToast('发送成功')
      let i = 60;
      let timer = setInterval(() => {
        textArea.value = +i + 's';
        i--;
        if (i < 0) {
          btnBool.value = true;
          textArea.value = '验证码';
          clearInterval(timer);
        }
      }, 1000);
      const payload = {
        event: 'notice',
        mobile: tel.value,
      };
      toPublish('driver/sendSms', payload, (obj : any) => { });
    }
  }
  /**
   * 提交绑定信息
   * @param {String} username 姓名
   * @param {String} mobile 手机号码
   * @param {String} code 验证码
   * @param {String} key 绑定的唯一值
   * @param {Number} driver_id 绑定人ID
   * @param {Number} fleet_id 绑定车队ID
   */
  function submit() {
    const name = username.value ? username.value : userinfo.realname
    const mobile = tel.value ? tel.value : userinfo.mobile
    if (!name) {
      errorToast('请输入真实姓名')
      return
    }
    if (!mobile) {
      errorToast('请输入手机号')
      return
    }
    if (tel.value && !code.value) {
      errorToast('请输入验证码')
      return
    }
    const payload = {
      driver_id,
      name,
      mobile,
      fleet_id: getFleetAll.value.id,
      key: all.value.key,
      code: code.value
    };
    showLoading();
    toPublish('driver/addFleetDriver', payload, (obj : any) => {
      const ref = obj;
      if (ref.code === 1) {
        successToast('绑定成功');
        setTimeout(() => {
          uni.redirectTo({
            url: '/pages/index/mine',
          });
        }, 1500);
      } else {
        showToast(ref.msg);
      }
    });
  }
</script>

<style scoped lang="less">
  .add {
    width: 480rpx;
    height: 100rpx;
    background: linear-gradient(-10deg, #2C96F9, #1B91FF);
    border-radius: 5px;
    text-align: center;
    line-height: 100rpx;
    color: #fff;
    margin: 60rpx auto 20rpx;
    font-size: 32rpx;
  }

  .package {
    input {
      text-align: right;
    }
  }

  .lis:nth-last-of-type(1) {
    border-bottom: 0px;
  }

  .lis {
    padding: 30rpx 0px;
    box-sizing: border-box;
    border-bottom: 1px solid #eee;
  }

  ._code {
    width: 120rpx;
    text-align: center;
    padding: 3rpx 0px 5rpx;
    box-sizing: border-box;
    border-radius: 5px;
    background-color: #1B91FF;
    color: #fff;
    margin-left: 20rpx;
  }
</style>